<template>
  <view class="scroll-panel">
    <view class="scroll-panel-name">{{ title }}</view>
    <view
      :class="['scroll-panel-i', items.choose ? 'active' : '']"
      v-for="(items, indexs) in dict"
      :key="indexs"
      @click="onFilterClick(items)"
      >
      <slot name="content" :item="items">{{ items.name }}</slot>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    title: String,
    dict: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onFilterClick(item) {
      item.choose = !item.choose
    },
  }
}

</script>
<style lang="scss" scoped>
.scroll-panel {
  margin: 32rpx 32rpx 16rpx;
  .scroll-panel-name {
    font-size: 24rpx;
    color: #212329;
    font-weight: 700;
  }
  .scroll-panel-i {
    display: inline-block;
    width: 31%;
    margin-right: 2%;
    background: #f6f7fb;
    border: 2rpx solid #f6f7fb;
    font-size: 24rpx;
    color: #55585f;
    min-height: 64rpx;
    padding-top: 12rpx;
    padding-bottom: 12rpx;
    text-align: center;
    margin-top: 16rpx;
  }
  .scroll-panel-i:nth-child(3n + 1) {
    margin-right: 0 !important;
  }
  .active {
    background: #ebf4ff;
    color: #2f86f6;
    font-weight: 700;
  }
}
</style>
